<template>
  <div class="outer">
    <div class="todo-container">
      <!-- 头部 -->
      <TodoHeader :addList="addList" />
      <!-- 内容展示区域 -->
      <TodoMain
        :todoList="todoList"
        :removeList="removeList"
        :changeCheck="changeCheck"
      />
      <!-- 底部区域 -->
      <TodoFooter
        :filterList="filterList"
        :changAllCheck="changAllCheck"
        :listAll="listAll"
        :listComplete="listComplete"
      />
    </div>
  </div>
</template>

<script>
import TodoHeader from "@/compontens/TodoHeader";
import TodoMain from "@/compontens/TodoMain";
import TodoFooter from "@/compontens/TodoFooter";
export default {
  name: "App",
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  methods: {
    //添加方法
    addList(msg) {
      if (msg.trim().length === 0) {
        alert("请输入内容!!!");
        return;
      }
      const index = this.todoList.find((item) => item.title === msg);
      if (index) {
        alert("请不要输入重复内容!!!");
        return;
      }
      this.todoList.unshift({
        id: Math.random().toString(8).slice(2),
        title: msg,
        isChecked: false,
      });
    },
    //改变选中状态
    changeCheck(id) {
      const index = this.todoList.findIndex((item) => item.id === id);
      this.todoList[index].isChecked = !this.todoList[index].isChecked;
    },
    //删除方法
    removeList(id) {
      const index = this.todoList.findIndex((item) => item.id === id);
      this.todoList.splice(index, 1);
    },
    //清除所有已完成的
    filterList() {
      this.todoList = this.todoList.filter((item) => item.isChecked !== true);
    },
    //选中改变所有
    changAllCheck(flag) {
      this.todoList = this.todoList.map((item) => {
        item.isChecked = flag;
        return item;
      });
    },
  },
  data() {
    return {
      todoList: [
        {
          id: Math.random().toString(8).slice(2),
          title: "打豆豆",
          isChecked: false,
        },
        {
          id: Math.random().toString(8).slice(2),
          title: "吃饭饭",
          isChecked: true,
        },
        {
          id: Math.random().toString(8).slice(2),
          title: "睡觉觉",
          isChecked: false,
        },
      ],
    };
  },
  computed: {
    listAll() {
      return this.todoList.length;
    },
    listComplete() {
      return this.todoList.filter((item) => item.isChecked === true).length;
    },
  },
};
</script>

<style>
@import url(@/App.css);
</style>